<template>
  <view
    class="tabbar-container"
    :style="
      'margin:' +
      params.margin_y * 2.2 +
      'rpx ' +
      params.margin_x * 2.2 +
      'rpx 0;z-index:' +
      params.z_index +
      ';border-radius:' +
      params.borderradius * 2.2 +
      'rpx;background-image: url(' +
      params.background +
      ');background-size:' +
      params.background_type +
      ';box-shadow:' +
      (params.shadow == 1 ? '0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.4)' : '')
    "
  >
    <view
      v-if="params.show_title == 1"
      class="tab-top"
      :style="'height:' + params.t_height * 2.2 + 'rpx'"
    >
      <view class="topleft">
        <image
          v-if="params.showicon == 1"
          :style="
            'width:' +
            params.t_width_x * 2.2 +
            'rpx;height:' +
            params.t_width_x * 2.2 +
            'rpx'
          "
          :src="params.icon_url"
          alt=""
        />
        <view
          :style="
            'color:' +
            params.t_color +
            ';font-size:' +
            params.t_fontsize1 * 2 +
            'rpx;margin:0 ' +
            params.t_margin_x * 2.2 +
            'rpx'
          "
        >
          {{ params.t_title }}</view
        >
        <uni-countdown
          v-if="params.show_time == 1"
          :show-day="false"
          color="#fff"
          background-color="#fd4a46"
          :hour="data1.hour"
          :minute="data1.minute"
          :second="data1.second"
          splitorColor="#fd4a46"
          border-radius="10rpx"
        ></uni-countdown>
      </view>
      <view class="topright" @click="goto" :data-url="params.t_tourl">
        <view
          :style="
            'color:' +
            params.url_title_color +
            ';font-size:' +
            params.t_fontsize2 * 2 +
            'rpx'
          "
        >
          {{ params.url_title }}</view
        >
        <image
          v-if="params.showicon1 == 1"
          :style="
            'width:' +
            params.t_width_y * 2.2 +
            'rpx;height:' +
            params.t_width_y * 2.2 +
            'rpx'
          "
          :src="params.icon_url1"
          alt=""
        />
      </view>
    </view>
    <!-- Tab栏 -->
    <view
      v-if="params.show_title1 == 1"
      class="tetabs"
      :id="uniqueTabId"
      :class="{ scrollable: params.canScroll == 1 }"
      :style="
        isSticky
          ? 'position: fixed;top:' +
            navHeight +
            'px;left: 0;right: 0;z-index: 99;border-radius: 0;background:' +
            params.bgcolor +
            ';padding:' +
            params.padding_y * 2.2 +
            'rpx ' +
            params.padding_x * 2.2 +
            'rpx'
          : 'background:' +
            params.bgcolor +
            ';padding:' +
            params.padding_y * 2.2 +
            'rpx ' +
            params.padding_x * 2.2 +
            'rpx'
      "
    >
      <view
        v-for="(tab, index) in data"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        :style="
          params.canScroll == 1
            ? 'width:' + params.scrollWidth * 2.2 + 'rpx;flex:none'
            : ''
        "
        @click="switchTab(index)"
      >
        <view
          class="tab-item-text"
          :style="{
            fontSize:
              currentTab == index
                ? params.fontsize1 * 2.3 + 'rpx'
                : params.fontsize1 * 2 + 'rpx',
            color: currentTab == index ? params.color2 : params.color1,
          }"
        >
          {{ tab.name }}
        </view>
        <view
          class="tab-item-desc"
          v-if="tab.tips"
          :style="{
            fontSize: params.fontsize2 * 2 + 'rpx',
            color: currentTab == index ? params.color4 : params.color3,
            borderRadius: params.tipsradius * 2.2 + 'rpx',
            backgroundColor:
              currentTab == index ? params.color6 : params.color5,
          }"
        >
          {{ tab.tips }}
        </view>
        <view
          :style="
            'border-radius: 47%;border: 6rpx solid ' +
            params.arrowcolor +
            ';border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;content: ' +
            '' +
            ';position: absolute;top: 0rpx;left: 0;bottom: -4rpx;left: 50%;transform: translateX(-50%);width: 50%;height: 120%;'
          "
          v-if="
            params.arrowstyle == 2 &&
            params.arrowshow == 1 &&
            currentTab === index
          "
          class="active-curve"
        >
        </view>
        <view
          :style="{ background: params.arrowcolor }"
          v-if="
            params.arrowstyle == 1 &&
            params.arrowshow == 1 &&
            currentTab === index
          "
          class="active-curve2"
        >
        </view>
      </view>
    </view>

    <view
      class="tab-content"
      :style="{ height: tabHeight + 'px' }"
      v-if="isSticky"
    ></view>

    <!-- 内容区域 -->
    <view
      class="content"
      v-if="!loading"
      :id="uniqueTabId2"
      :style="{
        background: params.bgcolor2,
        padding:
          params.padding_y * 2.2 + 'rpx ' + params.padding_x * 2.2 + 'rpx',
      }"
    >
      <block v-for="(setData, index) in pagecontent" :key="index">
        <block v-if="setData.temp == 'notice'">
          <dp-notice :params="setData.params" :data="setData.data"></dp-notice>
        </block>
        <block v-if="setData.temp == 'banner'">
          <dp-banner :params="setData.params" :data="setData.data"></dp-banner>
        </block>
        <block v-if="setData.temp == 'banner2'">
          <te-banner :params="setData.params" :data="setData.data" />
        </block>
        <block v-if="setData.temp == 'banner3'">
          <te-mbanner :params="setData.params" :data="setData.data" />
        </block>
        <block v-if="setData.temp == 'search'">
          <dp-search :params="setData.params" :data="setData.data"></dp-search>
        </block>
        <block v-if="setData.temp == 'text'">
          <dp-text :params="setData.params" :data="setData.data"></dp-text>
        </block>
        <block v-if="setData.temp == 'title'">
          <dp-title :params="setData.params" :data="setData.data"></dp-title>
        </block>
        <block v-if="setData.temp == 'dhlist'">
          <dp-dhlist :params="setData.params" :data="setData.data"></dp-dhlist>
        </block>
        <block v-if="setData.temp == 'line'">
          <dp-line :params="setData.params" :data="setData.data"></dp-line>
        </block>
        <block v-if="setData.temp == 'blank'">
          <dp-blank :params="setData.params" :data="setData.data"></dp-blank>
        </block>
        <block v-if="setData.temp == 'menu'">
          <dp-menu :params="setData.params" :data="setData.data"></dp-menu>
        </block>
        <block v-if="setData.temp == 'map'">
          <dp-map :params="setData.params" :data="setData.data"></dp-map>
        </block>
        <block v-if="setData.temp == 'cube'">
          <dp-cube :params="setData.params" :data="setData.data"></dp-cube>
        </block>
        <block v-if="setData.temp == 'picture'">
          <dp-picture
            :params="setData.params"
            :data="setData.data"
          ></dp-picture>
        </block>
        <block v-if="setData.temp == 'pictures'">
          <dp-pictures
            :params="setData.params"
            :data="setData.data"
          ></dp-pictures>
        </block>
        <block v-if="setData.temp == 'video'">
          <dp-video :params="setData.params" :data="setData.data"></dp-video>
        </block>
        <block v-if="setData.temp == 'tab'">
          <dp-tab
            :params="setData.params"
            :data="setData.data"
            :tabid="setData.id"
            :menuindex="menuindex"
          ></dp-tab>
        </block>
        <block v-if="setData.temp == 'tab2'">
          <te-tab
            :params="setData.params"
            :data="setData.data"
            :tabid="setData.id"
            :menuindex="menuindex"
            :currentTtime="currentTtime"
            @getdata="getdata"
          ></te-tab>
        </block>
        <block v-if="setData.temp == 'shop'">
          <dp-shop
            :params="setData.params"
            :data="setData.data"
            :shopinfo="setData.shopinfo"
          ></dp-shop>
        </block>
        <block v-if="setData.temp == 'product'">
          <dp-product
            :params="setData.params"
            :data="setData.data"
            :menuindex="menuindex"
          ></dp-product>
        </block>
        <block v-if="setData.temp == 'seckill'">
          <dp-seckill
            :params="setData.params"
            :data="setData.data"
            :menuindex="menuindex"
          ></dp-seckill>
        </block>

        <block v-if="setData.temp == 'tuangou'">
          <dp-tuangou
            :params="setData.params"
            :data="setData.data"
            :menuindex="menuindex"
          ></dp-tuangou>
        </block>

        <block v-if="setData.temp == 'coupon'">
          <dp-coupon :params="setData.params" :data="setData.data"></dp-coupon>
        </block>
        <block v-if="setData.temp == 'article'">
          <dp-article
            :params="setData.params"
            :data="setData.data"
          ></dp-article>
        </block>
        <block v-if="setData.temp == 'business'">
          <dp-business
            :params="setData.params"
            :data="setData.data"
          ></dp-business>
        </block>

        <block v-if="setData.temp == 'button'">
          <dp-button :params="setData.params" :data="setData.data"></dp-button>
        </block>
        <block v-if="setData.temp == 'hotspot'">
          <dp-hotspot
            :params="setData.params"
            :data="setData.data"
          ></dp-hotspot>
        </block>
        <block v-if="setData.temp == 'cover'">
          <dp-cover :params="setData.params" :data="setData.data"></dp-cover>
        </block>
        <block v-if="setData.temp == 'richtext'">
          <!-- #ifndef MP-WEIXIN -->
          <dp-richtext
            :params="setData.params"
            :data="setData.data"
            :content="setData.content"
          ></dp-richtext>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="setData.content"></rich-text>
          <!-- #endif -->
        </block>
        <block v-if="setData.temp == 'userinfo'">
          <dp-userinfo
            :params="setData.params"
            :data="setData.data"
            :content="setData.content"
          ></dp-userinfo>
        </block>
        <block v-if="setData.temp == 'share-card'">
          <dp-share-card
            :params="setData.params"
            :data="setData.data"
          ></dp-share-card>
        </block>
        <block v-if="setData.temp == 'step'">
          <dp-custom-swiper
            :params="setData.params"
            :data="setData.data"
          ></dp-custom-swiper>
        </block>
        <block v-if="setData.temp == 'video-list'">
          <dp-videolive
            :params="setData.params"
            :data="setData.data"
            :video_lists="setData.video_lists"
          ></dp-videolive>
        </block>
        <block v-if="setData.temp == 'location'">
          <dp-location
            :params="setData.params"
            :data="setData.data"
          ></dp-location>
        </block>
      </block>
    </view>
    <view class="loading-container" v-if="loading"> 数据加载中... </view>
    <loading v-if="loading"></loading>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      data1: {
        hour: 0,
        minute: 0,
        second: 0,
      },
      currentTab: 0,
      isSticky: false,
      navHeight: 0,
      observer: null,
      lastScrollTime: 0,
      tabsTop: 0, //tab栏距离top的值
      tabHeight: 0,
      statusBarHeight: 0,
      contentH: 0,
      tabs: [],
      loading: false,
      pagecontent: [],
      latitude: "",
      longitude: "",
      uniqueTabId: "",
      uniqueTabId2: "",
      CurrentscrollY: 0,
      prevTabStatus: false, // 上一个 tab 的 status 状态
      unwatch: null, // 解绑监听函数
      startInit: false, // 是否开始初始化tab
      canTabShow: true,
      currentTtime: 0,
    };
  },
  props: {
    params: {},
    data: {},
    tabid: { default: "" },
    menuindex: { default: -1 },
  },
  computed: {
    tabStyle() {
      if (this.isSticky) {
        return {
          position: "fixed",
          top: this.navHeight + "px",
          left: "0",
          right: "0",
          zIndex: 99,
          // borderRadius: '0'
        };
      }
      return {};
    },
    // 计算属性
    startInitTab() {
      return this.loading === false && this.startInit === true;
    },
  },
  created() {
    this.uniqueTabId =
      "tetabbartabs-" + Math.random().toString(36).substring(2, 15);
    app.globalData.tabList.push({ id: this.uniqueTabId, status: false });
    // console.log(app.globalData.tabList, 'tabList');
    this.uniqueTabId2 =
      "tetabbarcontent-" + Math.random().toString(36).substring(2, 15);
    if (this.params.fixedtop == "1" && app.globalData.isTabCanTop == "") {
      app.globalData.isTabCanTop = this.uniqueTabId;
    }
  },
  mounted() {
    this.currentTtime = this.data[this.currentTab].t_time;

    uni.$on("initTabsTop", this.initTabsTop);

    uni.$on(this.uniqueTabId, this.initTabsTop2);

    uni.$on("updateTabsTop", this.updateTabsTop);

    uni.$on("scrollY", this.scrollY);

    uni.$on("onPageScroll", this.scrollY2);

    this.switchTab(0);
    // 获取tabs的初始位置
    // setTimeout(() => {
    //     this.getTabsTop();
    // }, 3000);
  },
  beforeDestroy() {
    uni.$off("initTabsTop", this.initTabsTop);
    uni.$off(this.uniqueTabId, this.initTabsTop2);
    uni.$off("updateTabsTop", this.updateTabsTop);
    uni.$off("scrollY", this.scrollY);
    uni.$off("onPageScroll", this.scrollY2);
  },
  methods: {
    updateTabsTop(data) {
      // setTimeout(() => {
      // 获取当前组件的 uniqueTabId 和 app.globalData.indexTab
      const uniqueTabId = this.uniqueTabId;
      // const indexTab = app.globalData.indexTab;

      // 查找 uniqueTabId 和 data.id 在数组中的索引
      const currentIndex = app.globalData.indexTab.findIndex(
        (item) => item.id === uniqueTabId
      );
      const targetIndex = app.globalData.indexTab.findIndex(
        (item) => item.id === data.id
      );

      // 如果未找到 uniqueTabId 或 data.id，直接返回
      if (currentIndex === -1 || targetIndex === -1) {
        console.log("未找到 uniqueTabId 或 data.id 对应的元素:" + data.id);
        console.log(this.uniqueTabId, app.globalData.indexTab);
        return;
      }
      if (currentIndex > targetIndex) {
        if (data.type == "add") {
          this.tabsTop += data.tabsTop;
        } else {
          this.tabsTop -= data.tabsTop;
        }
      }
      // console.log(`${this.uniqueTabId}更新tab高度:`, this.tabsTop);
      // }, 1500);
    },

    scrollY(data) {
      this.navHeight = data.navHeight;
      this.CurrentscrollY = data.scrollTop;
      // console.log('scrollY', this.navHeight, this.CurrentscrollY)
      if (this.tabsTop == 0) {
        return;
      }
      if (data.scrollTop >= this.tabsTop - this.navHeight) {
        if (
          this.params.fixedtop == "1" &&
          app.globalData.isTabCanTop == this.uniqueTabId
        ) {
          this.isSticky = true;
        }
      } else {
        this.isSticky = false;
      }
    },

    scrollY2(data) {
      this.CurrentscrollY = data.scrollTop;
      // console.log(this.CurrentscrollY, this.tabsTop, this.uniqueTabId)
      if (this.tabsTop == 0) {
        return;
      }
      if (data.scrollTop >= this.tabsTop - this.navHeight) {
        if (
          this.params.fixedtop == "1" &&
          app.globalData.isTabCanTop == this.uniqueTabId
        ) {
          this.isSticky = true;
        }
      } else {
        this.isSticky = false;
      }
    },

    getTabsTop2() {
      // console.log(this.uniqueTabId + ' >>> 数据加载完毕开始初始化高度');
      this.getTabsTop();
    },

    initTabsTop2(data) {
      // console.log('initTabsTop', data.index, data.id)
      // console.log('第' + (data.index + 2) + '个tab组件(' + this.uniqueTabId + ')准备初始化高度');
      setTimeout(() => {
        this.startInit = true;
      }, 1000);
      // this.getTabsTop();
    },

    // initTabsTop(data) {
    //     console.log('initTabsTop', data.index, data.id)
    //     const currentIndex = app.globalData.tabList.findIndex(item => item.id === this.uniqueTabId);
    //     if (currentIndex !== -1) {
    //         for (let i = 0; i < data.index + 1 || app.globalData.tabList.length; i++) {
    //             if (!app.globalData.tabList[data.index].status) {
    //                 console.log('上一个组件未加载完成');
    //             }else if (i + 1 == currentIndex && data.id == this.uniqueTabId) {
    //                 console.log('第' + (data.index + 1) + '个tab组件(' + this.uniqueTabId + ')初始化高度');
    //                 this.getTabsTop();
    //                 break;
    //             }
    //         }
    //     }
    // },

    getTabsTop() {
      const selector = `#${this.uniqueTabId}`;
      const query = uni.createSelectorQuery().in(this);
      query
        .select(selector)
        .boundingClientRect((data) => {
          if (data) {
            if (this.CurrentscrollY > 0) {
              this.tabsTop = data.top + this.CurrentscrollY;
              this.tabHeight = data.height;
              app.shortIndexTab({
                id: this.uniqueTabId,
                top: this.tabsTop,
                status: true,
              });
              // console.log(`2获取(${selector})tab原本高度:`, this.tabsTop);
            } else {
              this.tabsTop = data.top;
              this.tabHeight = data.height;
              app.shortIndexTab({
                id: this.uniqueTabId,
                top: this.tabsTop,
                status: true,
              });
              // console.log(`1获取(${selector})tab原本高度:`, this.tabsTop);
            }
          }
        })
        .exec();
      const selector2 = `#${this.uniqueTabId2}`;
      const query2 = uni.createSelectorQuery().in(this);
      query2
        .select(selector2)
        .boundingClientRect((data) => {
          if (data) {
            this.contentH = data.height;
            // console.log(`${this.uniqueTabId}内容高度:`, this.contentH);
          }
        })
        .exec();
    },

    getContentH() {
      setTimeout(() => {
        const selector2 = `#${this.uniqueTabId2}`;
        const query2 = uni.createSelectorQuery().in(this);
        query2
          .select(selector2)
          .boundingClientRect((data) => {
            // console.log('getContentH', data)
            if (data) {
              if (this.contentH == 0) {
                this.contentH = data.height;
              } else {
                if (this.contentH < data.height) {
                  uni.$emit("updateTabsTop", {
                    type: "sub",
                    tabsTop: this.contentH - data.height,
                    id: this.uniqueTabId,
                  });
                } else {
                  uni.$emit("updateTabsTop", {
                    type: "add",
                    tabsTop: data.height - this.contentH,
                    id: this.uniqueTabId,
                  });
                }
                this.contentH = data.height;
              }
              // console.log(`${this.uniqueTabId}内容高度:`, this.contentH);
            }
          })
          .exec();
      }, 2000);
    },

    switchTab(index) {
      this.currentTtime = this.data[index].t_time;
      this.currentTab = index;
      // this.getContentH();
      this.getdata();
      this.scrollLast();
      this.changeCD(index);
    },

    getdata: function () {
      var that = this;
      that.loading = true;
      app.post(
        "Index/gettabcontent",
        {
          t_time: that.currentTtime,
          tabid: that.tabid,
          tabindexid: that.data[that.currentTab].id,
          latitude: that.latitude,
          longitude: that.longitude,
          hrefurl: that.data[that.currentTab].hrefurl,
          type: that.data[that.currentTab].type,
        },
        function (res) {
          that.loading = false;
          that.pagecontent = res.pagecontent;

          if (
            !app.globalData.tabList.find((item) => item.id === that.uniqueTabId)
              .status
          ) {
            let i = app.setTabStatus(that.uniqueTabId);
            // console.log('第' + (i + 1) + '个tab组件' + that.uniqueTabId + '加载数据');
            if (app.globalData.tabList[i + 1]) {
              uni.$emit(app.globalData.tabList[i + 1].id, {
                id: that.uniqueTabId,
                index: i,
              });
            }

            if (i == 0) {
              // console.log('第1个tab组件(' + that.uniqueTabId + ')初始化高度');
              // that.getTabsTop();
              that.startInit = true;
            }
          }

          that.getContentH();
          if (that.latitude == "" && that.longitude == "" && res.needlocation) {
            //console.log('getLocation')
            app.getLocation(
              function (res) {
                //console.log(res)
                that.latitude = res.latitude;
                that.longitude = res.longitude;
                that.getdata();
              },
              function (res2) {
                console.log(res2);
              }
            );
          }
        }
      );
    },
    getIndexdata: function () {
      this.$emit("getdata");
    },
    scrollLast: function () {
      if (this.isSticky) {
        // console.log(`${this.uniqueTabId}吸顶高度:`, this.tabsTop, this.navHeight);
        uni.$emit("scrollLast", { target: this.tabsTop - this.navHeight });
      }
    },

    changeCD: function (index) {
      //只取第一个
      if (index > 0) {
        return;
      }

      this.data1 = {
        hour: 0,
        minute: 0,
        second: 0,
      };

      let targetTime = this.data[index].end_time + ":00:00";

      // 获取当前时间
      const now = new Date();
      // 解析目标时间
      const [targetHours, targetMinutes, targetSeconds] = targetTime
        .split(":")
        .map(Number);
      // 创建目标日期对象（使用当前日期）
      const targetDate = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        targetHours,
        targetMinutes,
        targetSeconds
      );

      // 如果目标时间已经过去，则计算到明天同一时间的倒计时
      if (targetDate <= now) {
        targetDate.setDate(targetDate.getDate() + 1);
      }
      // 计算时间差（毫秒）
      const diff = targetDate - now;
      // 转换为时、分、秒
      let seconds = Math.floor(diff / 1000);
      const hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      const minutes = Math.floor(seconds / 60);
      seconds %= 60;
      this.data1.hour = hours;
      this.data1.minute = minutes;
      this.data1.second = seconds;
    },
  },
  watch: {
    startInitTab(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.getTabsTop2();
        }, 500);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tabbar-container {
  // background: #00b96b;
  // border-radius: 20rpx;
  transition: all 0.3s ease;
  height: auto;
  position: relative;
  // background: rgb(255, 255, 255, 0);
  overflow: hidden;
  // box-shadow: 0pt 2pt 6pt 0pt rgba(0,0,0,0.4);

  .tab-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      display: flex;
      align-items: center;
      gap: 5rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .topright {
      display: flex;
      align-items: center;
      gap: 5rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .tetabs {
    display: flex;
    padding: 20rpx 30rpx 30rpx;
    position: relative;
    // border-radius: 20rpx;
    transition: all 0.3s ease;

    &.scrollable {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    &.sticky {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      border-radius: 0;
    }

    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.8);
      font-size: 32rpx;
      position: relative;
      padding: 10rpx 0;
      margin-bottom: 20rpx;
      transition: all 0.3s ease;

      .tab-item-text {
        font-size: 31rpx;
      }

      .tab-item-desc {
        display: inline-block;
        padding: 3rpx 16rpx;
        font-size: 24rpx;
        border-radius: 20rpx;
        width: auto;
        margin: 8rpx auto 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.active {
        // color: #ffffff;
        font-weight: bold;

        .active-curve {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          bottom: -4rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 50%;
          height: 120%;
          border-radius: 47%;
          border: 5rpx solid rgb(255, 255, 255);
          border-top-color: transparent;
          border-left-color: transparent;
          border-right-color: transparent;
        }

        .active-curve2 {
          position: absolute;
          left: 50%;
          margin-left: -24rpx;
          bottom: 0rpx;
          height: 3px;
          border-radius: 1.5px;
          width: 48rpx;
        }
      }
    }
  }

  .content {
    min-height: 100rpx;
    // padding: 20rpx;
    // background: #ffffff;
    // border-radius: 20rpx;
  }

  .loading-container {
    text-align: center;
    padding: 40rpx;
    // color: #999;
    // background-color: rgb(236, 236, 236);
    width: 100%;
    height: 100%;
  }
}

:deep(.fixed) {
  .tetabs {
    border-radius: 0;
  }
}
</style>
